插件跟中间件比起来，后者影响的是路由请求本身，而插件影响的是 Nuxt 框架本身，框架主要由自身构建体系、Vue 和 Nitro 构成，所以插件影响的就是这三方面，本节包括如下内容：

• 创建和注册插件；
• 插件常见用例。

# 创建和注册插件

Nuxt3 会自动读取 plugins 目录下的文件注册为插件，并在创建 Vue 应用时加载它们。

# 创建插件

使用 defineNuxtPlugin() 声明一个插件，像下面这样：

javascript
复制代码// 唯一的参数是 NuxtApp 实例
export default defineNuxtPlugin(nuxtApp => {
  // Doing something with nuxtApp
  console.log(nuxtApp)
})

# 注册插件

前面提到 Nuxt3 会自动读取 plugins 目录下的文件并加载，但还是有一些细节需要大家了解：

• 实际上只注册 plugins 目录下根文件和子目录下的 index 文件。

  • 

• 插件的执行顺序可以用数字来控制，因为插件之间可能有依赖关系。

  • 

• 可在文件名上使用 .server 或 .client 后缀使插件仅作用于服务端或者客户端。

  • vbscript
    复制代码plugins/
    | - server-plugin.server.ts
    | - client-plugin.client.ts
    

    @前端进阶之旅: 代码已经复制到剪贴板

# Nuxt 上下文：NuxtApp

我们看到定义插件时，可以获取到 nuxtApp 对象，该对象是 NuxtApp 的实例，实际上是 Nuxt 提供的运行时上下文，可以同时用于客户端和服务端，并能帮我们访问 Vue实例、运行时钩子、运行时配置的变量、内部状态等。

我们需要了解 nuxtApp 一些重要的方法和属性以便使用：

• provide (name, value)：定义全局变量和方法；
• hook(name, cb)：定义 nuxt 钩子函数；
• vueApp：获取 vue 实例；
• ssrContext：服务端渲染时的上下文；
• payload：从服务端到客户端传递的数据和状态；
• isHydrating：用于检测是否正在客户端注水过程中。

# 常见插件用例

# 用例：使用 Nuxt 生命周期钩子

一个比较常见的插件用例是使用 Nuxt 生命周期钩子实现一些扩展功能，比如在前面的“错误处理”章节中，我们就曾利用插件编写生命周期处理错误的功能：

javascript
复制代码export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('app:error', (..._args) => {
    console.log('app:error')
  })
  nuxtApp.hook('vue:error', (..._args) => {
    console.log('vue:error')
  })
})